<template>
  <a-card :bordered="false" style="height:100%">
    <!-- 部门人员部分 -->
    <div v-show="listFlag">
      <div style="height:34px;border-bottom: 1px solid #000;">
        <span style="font-weight:bold;font-size: 16px;">企业通讯录</span>
      </div>
      <br />
      <a-input-search
        placeholder="搜索"
        :style="{width: (!cancelFlag?'100%':'86%')}"
        @focus="focusSearch"
        @search="onSearch"
        v-model="nameParam"
      />
      <a-button type="link" v-show="cancelFlag" @click="cancel">取消</a-button>
      <br />
      <div v-show="!searchFlag" :style="{overflow:'scroll',height:fullHeight-125+'px'}">
        <a-list class="labelClass" itemLayout="horizontal" :dataSource="orgData">
          <span style="width:24px" />
          <a-list-item
            slot="renderItem"
            slot-scope="item"
            @click="showOrg(item)"
            style="height:40px"
          >
            <a-icon type="folder" theme="twoTone" twoToneColor="#40a9ff" style="margin-top:6px;font-size:20px" />
            &nbsp;&nbsp;{{ item.name }}
          </a-list-item>
        </a-list>
        <a-list class="labelClass" itemLayout="horizontal" :dataSource="peopleList">
          <span style="width:24px" />
          <a-list-item slot="renderItem" slot-scope="item" @click="showInfo(item)">
            <a-icon type="user" style="font-size:20px" />
            &nbsp;&nbsp;{{ item.name }}
          </a-list-item>
        </a-list>
        <footer >
          <span v-show="!searchFlag">
            <a-button @click="back(1)" v-show="backButtonFlag" style="height:120%;width: calc(100% - 10px);border: 0px solid transparent;background: rgb(57, 110, 228)">
              <a-icon style="color:#FFFFFF" type="left" /><font size="4" color="#FFFFFF">返回</font>
            </a-button>
          </span>
        </footer>
      </div>
      <!-- 搜索部分 -->
      <div v-show="searchFlag">
        <a-list itemLayout="horizontal" :dataSource="searchPeopleList">
          <span style="width:24px" />
          <a-list-item slot="renderItem" slot-scope="item" @click="showInfo(item)">
            <a-icon type="user" style="font-size:20px" />
            &nbsp;&nbsp;{{ item.name+'('+item.orgName+')' }}
          </a-list-item>
        </a-list>
      </div>
    </div>
    <!-- 人员详情部分 -->
    <div v-show="infoFlag">
      <div style="height:150px;background:#40a9ff">
        <div style="height:50px"></div>
        <div style="padding-left:15px">
          <span style="font-size: 26px; color: white">{{ infoForm.name }}</span>
          <br />
          <span style="font-size: 15px; color: white">{{ infoForm.htgs }}</span>
        </div>
      </div>
      <a-form :form="infoForm" style="margin-top:20px;padding-left: 20px" class="infoFormClass">
        <a-form-item class="labelClass" label="姓名">
          <span class="formFontClass">{{ infoForm.name }}</span>
        </a-form-item>
        <a-form-item class="labelClass" label="电话">
          <span class="formFontClass"><a :href="'tel:'+infoForm.phone">{{ infoForm.phone }}</a></span>
        </a-form-item>
        <a-form-item class="labelClass" label="企业邮箱">
          <span class="formFontClass"><a :href="'mailto:'+infoForm.email">{{ infoForm.email===''?'&nbsp;':infoForm.email }}</a></span>
        </a-form-item>
        <a-form-item class="labelClass" label="部门">
          <span class="formFontClass">{{ infoForm.orgName }}</span>
        </a-form-item>
        <a-form-item class="labelClass" label="职位">
          <span class="formFontClass">{{ infoForm.position }}</span>
        </a-form-item>
      </a-form>
      <footer>
        <a-button @click="back(2)" style="height:120%;width: calc(100% - 10px);border: 0px solid transparent;background: rgb(57, 110, 228)">
          <a-icon style="color:#FFFFFF" type="left" /><font size="4" color="#FFFFFF">返回</font>
        </a-button>
      </footer>
    </div>
  </a-card>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { fingStaffByOrg, fingOrgByOrg } from '@/api/app'

export default {
  name: 'AddressList',
  mixins: [mixinDevice],
  components: {},
  data () {
    return {
      fullHeight: document.documentElement.clientHeight || document.body.clientHeight, //
      orgData: [],
      // 人员列表显示标记
      listFlag: true,
      // 人员详细显示标记
      infoFlag: false,
      backButtonFlag: false,
      searchFlag: false,
      // 人员列表
      peopleList: [],

      infoForm: {
        name: '',
        email: '',
        orgName: '',
        phone: ''
      },
      orgParentId: [],
      orgTitles: ['东睿科技'],
      nameParam: '',
      searchPeopleList: [],
      cancelFlag: false
    }
  },
  created () {
    this.requestOrg('1')
    document.title = this.orgTitles[0]
  },
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight
        that.fullHeight = window.fullHeight
      })()
    }
  },
  watch: {
    nameParam: function (val) {
      this.onSearch()
    },
    fullHeight (val) {
      if (!this.timer) {
        this.fullHeight = val
        this.timer = true
        const that = this
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    }
  },
  methods: {
    /**
     * 请求树
     */
    requestOrg (id) {
      // 获取树形组织信息
      fingOrgByOrg({ id: id }).then(res => {
        this.orgData = res
      })
    },
    /**
     * 点击部门获取id和title
     */
    showOrg (item) {
      this.orgParentId.push(item.parentId)
      this.orgTitles.push(item.name)
      this.requestPeople(item.id, item.name)
    },
    /**
     * 请求人员
     */
    requestPeople (id, title) {
      this.orgData = []
      this.peopleList = []
      document.title = title
      fingStaffByOrg({ id: id }).then(res => {
        this.peopleList = res
      })
      fingOrgByOrg({ id: id }).then(res => {
        this.orgData = res
      })
      this.listFlag = true
      this.backButtonFlag = true
    },
    /**
     * 返回上一页
     */
    back (val) {
      if (val === 1) {
        this.infoFlag = false
        const pid = this.orgParentId[this.orgParentId.length - 1]
        this.orgData = []
        this.peopleList = []
        this.requestOrg(pid)
        fingStaffByOrg({ id: pid }).then(res => {
          this.peopleList = res
        })
        this.orgParentId.splice(this.orgParentId.indexOf(pid), 1)
        this.orgTitles.splice(this.orgParentId.indexOf(pid), 1)
        const pname = this.orgTitles[this.orgParentId.length]
        document.title = pname
        if (this.orgParentId.length === 0) {
          this.backButtonFlag = false
        }
      } else if (val === 2) {
        this.listFlag = true
        this.infoFlag = false
      }
    },
    /**
     * 显示人员详细信息
     * */
    showInfo (item) {
      this.infoForm = {
        name: '',
        email: '',
        orgName: '',
        phone: ''
      }
      Object.assign(this.infoForm, item)
      this.listFlag = false
      this.infoFlag = true
    },
    /**
     * 搜索人
     */
    onSearch () {
      if (this.nameParam !== '') {
        this.searchFlag = true
        fingStaffByOrg({ name: this.nameParam }).then(res => {
          this.searchPeopleList = res
        })
      }
    },
    focusSearch () {
      this.cancelFlag = true
    },
    cancel () {
      this.nameParam = ''
      this.searchPeopleList = []
      this.cancelFlag = false
      this.searchFlag = false
    }
  }
}
</script>

<style lang="less" scoped>
.labelClass {
  border-bottom: 1px solid rgb(232, 232, 232);
  /deep/ .ant-form-item-label label {
    color: #bfbfbf;
  }
}
footer {
  bottom: 0;
  left:0;
  position: fixed;
  width: 100%;
  text-align: center;
  height: 40px;
  background: #ffffff;
  z-index: 99;
}
</style>
